<template>
  <!-- 责任书预览 -->
  <a-modal title="预览" :visible="visible" :footer="null" :width="1200" @cancel="visible = false">
    <a-spin :spinning="spinning">
      <iframe
        ref="iframe"
        :style="'width: 100%; height: '+GET_REDRESS_PERCENTAGE * 0.6+'vh; border: none'"
        :srcdoc="iframeContent"
        allowfullscreen="true"
        webkitallowfullscreen="true"
        mozallowfullscreen="true"
        oallowfullscreen="true"
        msallowfullscreen="true"
      />
    </a-spin>
  </a-modal>
</template>

<script>
import { duty } from '@/api/quality/quality' // api
import { mapGetters } from 'vuex'
export default {
  name: 'DudyPreView',
  data() {
    return {
      visible: false, // 预览责任书控件
      iframeContent: '', // 预览责任书内容
      spinning: false // 预览责任书加载控件
    }
  },
  props: {
    // 责任书id
    id: {
      type: [String, Number],
      default: () => ''
    }
  },
  computed: {
    ...mapGetters(['GET_REDRESS_PERCENTAGE'])
  },
  methods: {
    /**
     * 预览责任书
     */
    handlePreViewWord() {
      if (!this.id) {
        return
      }
      this.visible = true
      this.spinning = true
      duty
        .batchPrintPdf({
          id: this.id,
          isSelect: true
        })
        .then((res) => {
          this.spinning = false
          if (res.data[0]?.content) {
            this.iframeContent = res.data[0].content
          }
        })
        .catch(() => {
          this.spinning = false
        })
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .ant-calendar-picker {
  width: 100% !important;
}
</style>